<template>
  <div class="container-fluid">
    <div class="row">
      <cate-search-bar></cate-search-bar>
    </div>
    <div class="row">
      <div class="col-md-2">
        <order-nav @status="changeStatus"></order-nav>
      </div>
      <div class="col-md-10">
        <div
          v-if="showOrders.length == 0"
          class="alert alert-danger text-center"
          role="alert"
        >
          对不起，暂无此类订单信息
        </div>
        <template v-else>
          <order-item
            v-for="order in showOrders"
            :order="order"
            :key="order.orderId"
          ></order-item>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import OrderNav from "../components/order/OrderNav.vue";
import OrderItem from "../components/order/OrderItem.vue";
import CateSearchBar from "../components/CateSearchBar.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    OrderNav,
    OrderItem,
    CateSearchBar,
  },
  data() {
    return {
      showOrders: [],
    };
  },
  methods: {
    changeStatus(status) {
      if (status == "all") {
        this.showOrders = this.myOrders;
      } else {
        this.showOrders = this.myOrders.filter((ele) => {
          return ele.orderStatus === status;
        });
      }
    },
  },
  computed: {
    ...mapGetters({ myOrders: "order/myOrders" }),
  },
  watch: {
    myOrders(nValue) {
      this.showOrders = nValue;
    },
  },
  created() {
    this.$store.dispatch("order/fetchMyOrders");
  },
};
</script>